import React, { PureComponent } from 'react';
import moment from 'moment';
import PropTypes  from 'prop-types';

class Month extends PureComponent{

  // 通过一个日期计算出应当展示的42天（这里考虑到星期的因素，所以要多展示几天）
  _initStartEnd = () => {
    const { month, isStartFromSunday } = this.props;
    // 月份类型的转换纠正
    const StringMonth = moment(month).format('YYYY-MM-DD');
    // Month的默认值不在函数内部做，让函数更简化一些
    const currMonth = moment(StringMonth, 'YYYY-MM'),
          firstDay_weekDay = currMonth.isoWeekday();
    let startDateOfMonth, endDateOfMonth;
    if(!isStartFromSunday) {
      //星期从周一开始
      startDateOfMonth = currMonth.subtract(firstDay_weekDay - 1, 'day');
    } else {
      //星期从周日开始
      startDateOfMonth = currMonth.subtract(firstDay_weekDay, 'day');
    }
    endDateOfMonth = startDateOfMonth.clone().add(41, 'day');
    return { startDateOfMonth, endDateOfMonth }
  };

  // 将42天渲染出来
  _renderDate = (value) => {
    const
      weeks = 6,
      day = 7,
      { startDateOfMonth: start } = this._initStartEnd();
    let Month = [],
        weekRow = [],
        currDate = start;
    for(let i = 0; i < weeks; ++i){
      for(let i = 0; i < day; ++i){
          weekRow.push(moment(currDate));
          currDate = currDate.add(1, 'day');
      }
        Month.push(weekRow);
        weekRow = [];
    }
    return(
      <tbody>
      {Month.map((week, index) => (
        <tr key={`${index}-week`}>
          {week.map(day => (<td key={day.format('YYYY-MM-DD')}>{this.props.renderFullDate(day)}</td>))}
        </tr>
      ))}
      </tbody>
    );
  };

  render(){
    return(
        <div className={this.props.className}>
          { this.props.month ? <table frame='void' rules='none'  style={{width: '100%'}} >
            <thead>
            <tr>
              {this.props.weekText.map((value, index) => (<td key={`${index}-week-item`}>{this.props.renderWeekHead(value)}</td>))}
            </tr>
            </thead>
            {this._renderDate(this.props.month)}
          </table> : '请输入要显示的月份'}
        </div>
    )
  }
}
const initStyle = {
    margin: '0 auto',
    width: '24px',
    height: '24px',
    lineHeight: '24px',
    fontSize: '16px',
    color: 'rgba(0, 0, 0, 0.65)',
    textAlign: 'center',
    fontFamily: '"Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'}
// 默认每个日期单元格的渲染，如果用户有自定义，会将此覆盖
const _initDateRender = (date) => {
  return(
    <div className='month-day-wrapper' style={initStyle}>
      {date.date()}
    </div>
  )
};
// 默认周表头的渲染，如果用户有自定义，会将此覆盖
const _initWeekHeadRender = (value) => {
  return(
    <div className='month-week-wrapper' style={initStyle}>
      {value}
    </div>
  )
};
Month.defaultProps = {
  isStartFromSunday: false,
  weekText: ['一','二','三','四','五','六','日'],
  renderFullDate: _initDateRender,
  renderWeekHead: _initWeekHeadRender,
  className: 'calendar-month',
};
Month.prototypes  = {
  month: PropTypes.isRequired,
  isStartFromSunday: PropTypes.bool.isRequired,
  weekText: PropTypes.array,
  renderFullDate: PropTypes.func,
  renderWeekHead: PropTypes.func,
};

export default Month;
